<template>
  <div class="form">
    <div class="title">用箱需求</div>
    <el-form ref="form"
              :disabled="seeFlag"
             :model="form"
             label-width="120px"
             size="small"
             inline
             label-suffix="："
             :rules="rules">
      <el-form-item label="作业码头"
                      prop="termCode">
            <el-select clearable style="width: 150px" size="small"  @change="$emit('setTerm',form.termCode)"
                   v-model="form.termCode" placeholder="请选择作业码头">
            <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- @change="getVel" <el-form-item label="码头作业区"
                    prop="workZone">
          <el-select v-model="form.workZone"
                    :disabled="!form.termCode"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
              <el-option v-for="item in dataList.workZone"
                     :key="item.id"
                     :label="item.cnName"
                     :value="item.id"></el-option>
            </el-select>
      </el-form-item> -->
      <el-form-item label="计划箱数"
                    prop="plannum">
        <el-input v-model="form.plannum"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="持箱人"
                    prop="cstCopercd">
         <el-select v-model="form.cstCopercd"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.relationTenantName" :value="item.relationTenantId"
                      v-for="item,index in dataList.cstCoperList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船公司箱型"
                    prop="ctypecd">
        <el-select  clearable style="width: 150px" size="small"
                    v-model="form.typeSize" @change="ctypecd" placeholder="请选择船公司箱型">
          <el-option  :label="item.containerType+'/'+item.containerSize" :value="[item.containerType,item.containerSize]"  
          v-for="item,index in dataList.boxList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船名航次"
                    prop="ivoyId">
          <el-tooltip :content="form.voyName"
                      placement="bottom"
                      popper-class="testtooltip" v-if="seeFlag">
            <el-select  v-model="form.ivoyId" 
                @change="voyId" placeholder="请选择"
                   remote
                   :remote-method="remoteMethod"
                clearable filterable style="width:150px">
                <el-option v-for="item in shipNo"  :key="item.id"   
                 :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
                :value="item.id"></el-option>
            </el-select>
         </el-tooltip>                     
        <el-select  v-model="form.ivoyId" 
            @change="voyId" placeholder="请选择"
                   remote
                   :remote-method="remoteMethod"
            clearable filterable style="width:150px" v-else>
            <el-option v-for="item in shipNo"  :key="item.id"   
             :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
             :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="坏/污"
                    prop="dirtyfg">
        <el-select v-model="form.dirtyfg"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.DIRTYCD" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附加标志"
                    prop="additionalcode">
        <el-select v-model="form.additionalcode"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.ADDTIONALOPERATE" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用箱备注"
                    prop=""
                    style="display:block">
        <el-input type="textarea"
                  placeholder="请输入船期备注"
                  clearable
                  v-model="form.remark"
                  style="width:710px"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'boxNoNumForm',
  components: {},
  props:{
    seeFlag:{
      default:false
    },
    planTag:{
      default:null
    }
  },
  watch:{
    form(){
      //console.log(this.form)
      if(this.form.ctypecd&&this.form.cszCsizecd){
        this.form.typeSize=this.form.ctypecd+'/'+this.form.cszCsizecd
        console.log(this.form)
      }
      if(this.form.id){
        this.voyId(this.form.ivoyId)
      }
    },
  },
  data() {
    return {
      termList:[],
      form: {},
      oriForm: {},
      rules: {
        
          termCode: [
            { required: true, message: '请选择作业码头', trigger: 'change' }
          ],
          plannum: [
            { required: true, message: '请填写计划箱数', trigger: 'blur' }
          ],
          cstCopercd: [
            { required: true, message: '请选择持箱人', trigger: 'change' }
          ],
          ctypecd: [
            { required: true, message: '请选择船公司箱型', trigger: 'change' }
          ],
      },

      dataList:{},
      form1:{},
      shipNo:[],
    }
  },

  methods: {
    getWork(){
      this.$api.opaAreaCode({
        termCode:this.form.termCode
      }).then(res=>{
        this.dataList.workZone=res.data.data
        this.$forceUpdate()
      }).catch()
    },
    voyId(id){
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
          this.form.voyId=id
        }
      })
    },
    ctypecd(cd){
      this.form.ctypecd=cd[0]
      this.form.cszCsizecd=cd[1]
      // this.dataList.boxList.forEach(item => {
      //   if(cd===item.containerType){
      //     //this.form.ctypecd=item.containerType
      //     this.form.cszCsizecd=item.containerSize
      //   }
      // });
    },
    remoteMethod(val = ''){
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
          if(this.form.id){
            this.voyId(this.form.ivoyId)
          }
        })
        .catch()
    },
    getDate() {
      this.dataList = {
        INTERNALFG_IM: [],
        OVER_LMT_CD: [],
        DIRTYCD: [],
        ADDTIONALOPERATE: [],
        cus: [],
        boxSize: [],
        ports: [],
        hz: [],
        hd: [],
        danger: [],
        union: [],
      }
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      //boxSize 箱型
      //cus 持箱人
      //shipNo 航名
      //INTERNALFG_IM 贸易类型
      //DIRTYCD 坏/污
      //ADDTIONALOPERATE 附加操作
      this.$api
        .getDangerUnionno()
        .then((res) => {
          this.dataList.union = res.data
        })
        .catch()
        this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:'',//进出口 进口I,出口E
        something:'',//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
          if(this.form.id){
            this.voyId(this.form.ivoyId)
          }
        })
        .catch()

      this.$api.getCustomerRelations({
          //termCode: 'HX',
        }).then((res) => {
          this.dataList.cstCoperList = res.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .containerTypeSizeInfo()
        .then((res) => {
          this.dataList.boxList = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'DIRTYCD',
        })
        .then((res) => {
          this.dataList.DIRTYCD = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'ADDTIONALOPERATE',
        })
        .then((res) => {
          this.dataList.ADDTIONALOPERATE = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api.refCode({
          domain: 'INTERNALFG_IM',
        })
        .then((res) => {
          this.dataList.INTERNALFG_IM = res.data.data
          this.$forceUpdate()
        })
        .catch()
        this.$api.refCode({
          domain: 'ADDTIONALOPERATE',
        }).then((res) => {
          this.dataList.ADDTIONALOPERATE = res.data.data
          this.$forceUpdate()
        })
        .catch()
    },
  },

  computed: {},

  mounted() {
    this.getDate()
  },
}
</script>
<style lang='less' scoped>
.form {
  background-color: #fff;
  padding: 20px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    border-left: 5px solid #0f47b8;
    line-height: 16px;
    padding-left: 8px;
    margin-bottom: 25px;
  }
}
.btn {
  text-align: center;
  .search {
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}
/deep/ .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
</style>